<template>
	<view>
		<public-module></public-module>
		<wlk-navbar title="我的优惠券" navbarType='3'></wlk-navbar>
		<view class="bg-white">
			<u-tabs :list='tabs' :current='tIndex' :scrollable='false' lineColor='#FD4A46' @change='setIndex'></u-tabs>
		</view>
		<view class="coupon-list" v-if="list.length>0">
			<view v-for="(item, index) in list" :key="index" class="coupon">
				<view class="pt_left">
					<view class="pt_left-content">
						<view class="f1" style="color:red">
							<text class="t0">￥</text>
							<text class="t1">{{item.sub_price}}</text>
						</view>
						<view class="f2" style="color:red">
							<text v-if="item.min_price>0">满{{item.min_price}}元可用</text>
							<text v-else>无使用门槛</text>
						</view>
					</view>
				</view>
				<view class="pt_right">
					<view class="f1">
						<view class="t1">{{item.name}}</view>
						<text class="t2" style="background:rgba(255,0,0,0.1);color:red">满减券</text>
						<view class="t3" :style="item.bid>0?'margin-top:0':'margin-top:10rpx'">有效期至 {{item.endtime}}
						</view>
					</view>
					<image class="sygq" v-if="item.is_overdue==1" src="https://feiya.qfxwl.com/assets/img/ygq.png">
					</image>
					<button class="btn" v-else-if="item.is_use==0" @click="jump">去使用</button>
					<image class="sygq" v-else-if="item.is_use==1" src="https://feiya.qfxwl.com/assets/img/ysy.png"></image>
				</view>
			</view>
			<u-loadmore line status='nomore' marginTop='20'></u-loadmore>
		</view>
		<u-empty v-else mode='list' marginTop='20vh'></u-empty>
	</view>
</template>

<script>
	import {
		toUrl
	} from '@/wlkutils/tools';
	export default {
		data() {
			return {
				tabs: [{
					name: '全部'
				}, {
					name: '未使用'
				}, {
					name: '已使用'
				}, {
					name: '已过期'
				}],
				tIndex: 0,
				list: []
			};
		},

		onLoad(opt) {
			// console.log(app);
			this.getList()
		},
		methods: {
			jump() {
				toUrl('/pages/index/category');
			},
			setIndex(e) {
				this.tIndex = e.index
				this.getList()
			},
			async getList() {
				const res = await uni.$u.http.post('coupon/getList', {
					active: this.tIndex
				})
				if (res.code == 1) {
					this.list = res.data
				}
			},
			changetab: function(st) {
				this.st = st;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.getdata();
			},
			changeradio: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				var datalist = that.datalist;
				var checked = datalist[index].checked;
				if (checked) {
					datalist[index].checked = false;
					that.checkednum--;
				} else {
					datalist[index].checked = true;
					that.checkednum++;
				}
				that.datalist = datalist;
				that.test = Math.random();
				console.log(that.checkednum);
				var ids = [];
				for (var i in datalist) {
					if (datalist[i].checked) {
						ids.push(datalist[i].id);
					}
				}
				ids = ids.join(',');
				that.shareTitle = '送你' + that.checkednum + '张' + that.t('优惠券');
				that.shareDesc = '点击前往查看领取';
				that.sharePic = app.globalData.initdata.logo;
				if (app.globalData.platform == 'h5' || app.globalData.platform == 'mp' || app.globalData.platform ==
					'app') {
					that.shareLink = app.globalData.pre_url + '/h5/' + app.globalData.aid +
						'.html#/pages/coupon/coupongive?scene=rids_' + ids + '-pid_' + app.globalData.mid;
				} else {
					that.shareLink = '/pages/coupon/coupongive?scene=rids_' + ids + '-pid_' + app.globalData.mid;
				}
				console.log(that.shareLink);
				that.loaded({
					title: that.shareTitle,
					pic: that.sharePic,
					desc: that.shareDesc,
					link: that
						.shareLink
				});
			},

		}
	};
</script>
<style scoped lang="scss">
	.coupon-list {
		width: 100%;
		padding: 20rpx
	}

	.coupon {
		width: 100%;
		display: flex;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		align-items: center;
		position: relative;
		background: #fff;
	}

	.coupon .pt_left {
		background: #fff;
		min-height: 200rpx;
		color: #FFF;
		width: 30%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.coupon .pt_left-content {
		width: 100%;
		height: 100%;
		margin: 30rpx 0;
		border-right: 1px solid #EEEEEE;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.coupon .pt_left .f1 {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
	}

	.coupon .pt_left .t0 {
		padding-right: 0;
	}

	.coupon .pt_left .t1 {
		font-size: 60rpx;
	}

	.coupon .pt_left .t2 {
		padding-left: 10rpx;
	}

	.coupon .pt_left .f2 {
		font-size: 20rpx;
		color: #4E535B;
		text-align: center;
	}

	.coupon .pt_right {
		background: #fff;
		width: 70%;
		display: flex;
		min-height: 200rpx;
		text-align: left;
		padding: 20rpx 20rpx;
		position: relative
	}

	.coupon .pt_right .f1 {
		flex-grow: 1;
		flex-shrink: 1;
	}

	.coupon .pt_right .f1 .t1 {
		font-size: 28rpx;
		color: #2B2B2B;
		font-weight: bold;
		height: 60rpx;
		line-height: 60rpx;
		overflow: hidden
	}

	.coupon .pt_right .f1 .t2 {
		height: 36rpx;
		line-height: 36rpx;
		font-size: 20rpx;
		font-weight: bold;
		padding: 0 16rpx;
		border-radius: 4rpx;
		margin-right: 16rpx;
	}

	.coupon .pt_right .f1 .t2:last-child {
		margin-right: 0;
	}

	.coupon .pt_right .f1 .t3 {
		font-size: 20rpx;
		color: #999999;
		height: 46rpx;
		line-height: 46rpx;
	}

	.coupon .pt_right .f1 .t4 {
		font-size: 20rpx;
		color: #999999;
		height: 46rpx;
		line-height: 46rpx;
		max-width: 76%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.coupon .pt_right .btn {
		background-image: linear-gradient(270deg, red 0%, rgba(255, 0, 0, 0.8) 100%);
		position: absolute;
		right: 16rpx;
		top: 49%;
		margin-top: -28rpx;
		border-radius: 28rpx;
		width: 140rpx;
		height: 56rpx;
		line-height: 56rpx;
		color: #fff
	}

	.coupon .pt_right .sygq {
		position: absolute;
		right: 30rpx;
		top: 50%;
		margin-top: -50rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.coupon .pt_left.bg3 {
		background: #ffffff;
		color: #b9b9b9 !important
	}

	.coupon .pt_right.bg3 .t1 {
		color: #b9b9b9 !important
	}

	.coupon .pt_right.bg3 .t3 {
		color: #b9b9b9 !important
	}

	.coupon .pt_right.bg3 .t4 {
		color: #999999 !important
	}

	.coupon .radiobox {
		position: absolute;
		left: 0;
		padding: 20rpx
	}

	.coupon .radio {
		flex-shrink: 0;
		width: 32rpx;
		height: 32rpx;
		background: #FFFFFF;
		border: 2rpx solid #BFBFBF;
		border-radius: 50%;
	}

	.coupon .radio .radio-img {
		width: 100%;
		height: 100%
	}

	.giveopbox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.btn-give {
		width: 90%;
		margin: 30rpx 5%;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		border-radius: 48rpx;
	}
</style>